<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes bian {
    from{
       width: 12em;
    }
    to{
        width: 6em;   
    }
}
@keyframes noAction {
            to{
                transform: translateY(100%);
              opacity: 0;  
            }
        }
        @keyframes bian2 {
    from{
       width: 6em;
    }
    to{
        width: 12em;   
    }
}
@keyframes action {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
    
}
    </style>
</head>
<body>
    <span>321</span>
    <div>123</div>
    
</body>
<script src="routes/actionListener.js"></script>
<script>
  let div = document.querySelector('div')
  let span = document.querySelector('span')
  span.style.backgroundColor='red'
  div.style.backgroundColor="gray"
  div.style.width='6em'
  div.style.animation="bian 2s forwards "
    span.onclick= function(){
        console.log(1)
        div.style.animation='action 1s forwards '
    }
function fn(){
    console.log(div.style.animation)
}
function throttle(method,delay,duration){
    var timer=null;
    var begin=new Date();    
    return function(){                
        var context=this, args=arguments;
        var current=new Date();        
        clearTimeout(timer);
        if(current-begin>=duration){
            method.apply(context,args);
            begin=current;
        }else{
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
    }
}
  actionListener()
</script>
</html>